<!--
 * FilePath     : \src\views\home\components\companyIntroduction.vue
 * Author       : SJZ
 * Date         : 2025-03-24 21:18
 * LastEditors  : SJZ
 * LastEditTime : 2025-03-28 00:23
 * Description  : 公司介绍
 * CodeIterationRecord: 
 -->
<template>
  <div class="text-center mt-50 px-10% box-border">
    <h1>AN EXPORT COMPANY OF AUTOMOBILE FROM CHINA</h1>
    <h3 class="c-#666666">Zhenguan Automobile Service Co., Ltd</h3>
    <div>
      <div class="inline-block w-45% mr-5% y-aline-start text-left">
        <h4>Looking for</h4>
        <h3 class="theme-color-primaryFontColor">DISTRIBUTION PARTNERS</h3>
        <h4>Offer an even wider</h4>
        <h3 class="theme-color-primaryFontColor">SELECTION OF HIGH-QUALITY CARS</h3>
        <div class="b-b-solid b-b-1 theme-bc-primaryFontColor pr-10% my-30">
          <i class="iconfont icon-car fs-70 theme-color-primaryFontColor mb--30"></i>
        </div>
        <div class="sons-html-i:fs-26 sons-html-i:theme-color-primaryFontColor">
          <div>
            <i class="iconfont icon-check-box"></i>
            Plenty of car sources in stock & ready to ship.
          </div>
          <div>
            <i class="iconfont icon-check-box"></i>
            Competitive car price
          </div>
          <div>
            <i class="iconfont icon-check-box"></i>
            Safe Trading Solution
          </div>
          <div>
            <i class="iconfont icon-check-box"></i>
            Shorter Car Delivery Time
          </div>
        </div>
        <div class="h-30 lh-loose w-100 bg-#307ff9 c-#ffffff mt-20 p-10 cursor-pointer">READ MORE</div>
      </div>
      <div class="inline-block w-45% ml-5% y-aline-start text-left">
        <div class="aline-start mb-10">
          <div class="product-icon">
            <i class="iconfont icon-car"></i>
          </div>
          <div class="flex-auto ml-70 mb-60">
            <h4>Electric Car</h4>
            <div>Provide more choices of electric car</div>
            <a href="/">All Models</a>
          </div>
        </div>
        <div class="aline-start mb-10">
          <div class="product-icon">
            <i class="iconfont icon-car"></i>
          </div>
          <div class="flex-auto ml-70 mb-60">
            <h4>Hybrid Car</h4>
            <div>Provide more choices of hybrid car</div>
            <a href="/">All Models</a>
          </div>
        </div>
        <div class="aline-start mb-10">
          <div class="product-icon">
            <i class="iconfont icon-car"></i>
          </div>
          <div class="flex-auto ml-70 mb-60">
            <h4>Gasoline Car</h4>
            <div>Provide more choices of gasoline car</div>
            <a href="/">All Models</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps({
  brandTypes: {
    type: Array as PropType<Record<string, string>[]>
    // require: true
  }
});
</script>
<style lang="scss" scoped>
.product-icon {
  position: relative;
  &::before {
    background: #07f;
    bottom: 0;
    content: "";
    height: 100%;
    opacity: 0.19;
    position: absolute;
    right: -30px;
    transform: skewX(-20deg);
    width: 100%;
  }
  i {
    font-size: 130px;
    color: $base-color;
  }
}
</style>
